<template>
  <el-container class="allbody" onscroll="false">
    <el-main style="height: 100%; z-index: 5">
      <!--<Calendar-->
      <!--v-on:choseDay="clickDay"-->
      <!--v-on:changeMonth="changeDate"-->
      <!--&gt;</Calendar>-->
      <el-row style="width: 100%; height: 5%">
        <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
      </el-row>
      <el-row style="width: 100%; height: 10%; margin-bottom: 20px">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin-top: 20px; margin-left: 10px"
        >
          <el-form-item>
            <el-input
              v-model="searchArgs.s001"
              placeholder="设备类别"
              style="width: 150px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searchArgs.s002"
              placeholder="设备品种"
              style="width: 150px"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="searchArgs.s003"
              placeholder="使用单位"
              style="width: 150px"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button style="color: #009bfe; width: 150px" @click="show"
              >查询</el-button
            >
          </el-form-item>

          <el-form-item>
            <el-button style="color: #fe3d15; width: 150px" @click="reset"
              >重置</el-button
            >
          </el-form-item>
          <!-- 
          <el-form-item>
            <el-link href="#" :underline="false" type="warning" target="_blank"
              >高级筛选</el-link
            >
          </el-form-item> -->
        </el-form>
      </el-row>

      <el-row style="width: 100%; height: 80%; margin-top: -2%">
        <el-table
          :data="tableData"
          style="
          width:97%
            height: 98%;
          "
          v-loading="loading"
          fit
          height="750"
        >
          <!-- <el-table-column
            v-model="scope.row.selected"
            @change="selectedChange(scope.row)"
            type="selection"
            width="50"
          ></el-table-column> -->
          <el-table-column width="80">
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.selected"
                @change="selectedChange(scope.row)"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="Id" label="序号" width="70"> </el-table-column>
          <el-table-column prop="t004" label="设备代码" width="180.5">
          </el-table-column>
          <el-table-column prop="a001" label="定检数据" width="80.5">
          </el-table-column>

          <el-table-column prop="a002" label="点检数据" width="80.5">
          </el-table-column>

          <el-table-column prop="a003" label="检测数据" width="80.5">
          </el-table-column>

          <el-table-column prop="a004" label="维修数据" width="80.5">
          </el-table-column>

          <el-table-column prop="a005" label="监控数据" width="80.5">
          </el-table-column>

          <el-table-column prop="a006" label="监测数据" width="80.5">
          </el-table-column>
          <el-table-column prop="t001" label="设备类别" width="120.5">
          </el-table-column>
          <el-table-column prop="t002" label="设备品种" width="160.5">
          </el-table-column>
          <el-table-column prop="t003" label="产品编号" width="150.5">
          </el-table-column>
          <el-table-column prop="t005" label="企业编号" widtFh="180.5">
          </el-table-column>

          <el-table-column prop="t006" label="规格型号" width="180.5">
          </el-table-column>

          <el-table-column prop="t007" label="使用单位" width="300.5">
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="pageSizeChange"
          @current-change="pageChange"
          :current-page="currentPage"
          :page-sizes="[15, 30, 50, 80]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import ElContainer from "element-ui/packages/container/src/main";
import ElAside from "element-ui/packages/aside/src/main";
import ElHeader from "element-ui/packages/header/src/main";
import ElMain from "element-ui/packages/main/src/main";
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
import { get, get as userType, del, dels } from "@/api/sys/connSysAuthApi";
import { parseTime } from "@/utils";
import { req } from "@/api/base/BaseApi";
import Calendar from "vue-calendar-component";
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "index",
  components: { Calendar,Breadcrumb },
  comments: {
    ElMain,
    ElHeader,
    ElAside,
    ElContainer,
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    tableRowStyle({ row, rowIndex }) {
      return "background-color: #02152f;color: #fff";
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #2ec7c9;color: #fff;font-weight: 500;";
      }
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      console.log("调用行样式");
      return {
        background: "#06134A",
        color: "#72C22D",
      };
    },
    getTableDataFormSon(data) {
      const tableDataTemp = data;
      this.tableData = [];
      for (let j = 9; j >= 0; j--) {
        const tableDataI = {};
        for (let i = 0; i < this.measurePoints.length; i++) {
          const point = this.measurePoints[i];
          const values = tableDataTemp.get(point);
          const date = new Date(values[j].name);
          if (i <= 0) {
            tableDataI["time"] =
              date.getFullYear() +
              "/" +
              (date.getMonth() + 1) +
              "/" +
              date.getDate() +
              " " +
              date.getHours() +
              ":" +
              date.getMinutes() +
              ":" +
              date.getSeconds();
          }
          tableDataI[point + "value"] = values[j].value;
        }
        this.tableData.push(tableDataI);
      }
      this.currTableData = [];
      for (let i = 0; i < this.measurePoints.length; i++) {
        const point = this.measurePoints[i];
        const values = tableDataTemp.get(point);
        const date = new Date(values[values.length - 1].name);
        this.currTableData.push({
          point: point,
          data: values[values.length - 1].value,
          time:
            date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(),
        });
      }
    },
    addMGData(list) {
      // 舍去前两项数据
      list.shift();
      list.shift();
      // 加入需要置顶的两项数据
      const row2 = {
        no: 2,
        t001: "桥式起重机",
        t002: "冶金桥式起重机",
        t003: "030707",
        t004: "40103405022003090602",
        t005: "一钢轧 003",
        t006: "QD190/63-22.3A7",
        t007: "马鞍山钢铁股份有限公司",
        a001: "2份",
        a002: "0条",
        a003: "0份",
        a004: "0条",
        a005: "0天",
        a006: "0天",
      };
      this.setMgChecKData(row2);
      list.unshift(row2);
      const dateHead = new Date();
      dateHead.setFullYear(2019);
      dateHead.setMonth(7);
      dateHead.setDate(26);
      const dateNow = new Date();
      const days = parseInt(
        (dateNow.getTime() - dateHead.getTime()) / (3600 * 1000 * 24)
      );
      const row1 = {
        no: 1,
        t001: "桥式起重机",
        t002: "冶金桥式起重机",
        t003: "0202001-2",
        t004: "41003405002006080017",
        t005: "一钢轧 008",
        t006: "QD200/63-23.5A7",
        t007: "马鞍山钢铁股份有限公司",
        a001: "2份",
        a002: "365条",
        a003: "2份",
        a004: "122条",
        a005: days + "天",
        a006: days + "天",
      };
      this.setMgChecKData(row1);
      list.unshift(row1);
    },
    async show() {
      let showDeafultValue = true;
      // 如果有筛选项的话，不展示马钢的两条数据
      if (
        this.searchArgs.s001 ||
        this.searchArgs.s002 ||
        this.searchArgs.s003
      ) {
        showDeafultValue = false;
      }
      // 获取起重机列表
      const args = {
        f013: this.searchArgs.s001,
        f014: this.searchArgs.s002,
        f032: this.searchArgs.s003,
      };
      if (args.f013 == null || args.f013 == "") {
        delete args.f013;
      }
      if (args.f014 == null || args.f014 == "") {
        delete args.f014;
      }
      if (args.f032 == null || args.f032 == "") {
        delete args.f032;
      }
      console.log("args:", args);
      const res = await req("/lifting-service/info/list", "GET", {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        // 搜索条件
        ...args,
      });
      if (res.data) {
        const { list } = res.data;
        // 生成定检数据字段和用于表格展示的字段
        for (const item of list) {
          item["a001"] = "1份";
          item["a002"] = "0条";
          item["a003"] = "0份";
          item["a004"] = "0条";
          item["a005"] = "0天";
          item["a006"] = "0天";
          this.setCheckData(item);
          this.setTableRowData(item);
        }
        // 如果是第一页，且不使用条件搜索，将两项重要数据添加置顶
        if (this.currentPage == 1 && showDeafultValue) {
          await this.addMGData(list);
        }
        // 生成序号
        this.generateIds(list);
        // 生成选中属性
        this.generateSelected(list);
        this.tableData = list;
        this.total = res.data.total;
      } else {
        this.total = 0;
        this.tableData = [];
      }
    },
    // async show() {
    //   let showDeafultValue = true;
    //   // 如果有筛选项的话，不展示马钢的两条数据
    //   if (
    //     this.searchArgs.s001 ||
    //     this.searchArgs.s002 ||
    //     this.searchArgs.s003
    //   ) {
    //     showDeafultValue = false;
    //   }
    //   // 获取铜陵总数
    //   const TLRes = await req("/lifting-service/info/list", "GET", {
    //     pageNum: 1,
    //     pageSize: 1,
    //     f013: this.searchArgs.s001,
    //     f014: this.searchArgs.s002,
    //     f032: this.searchArgs.s003,
    //   });
    //   // 获取青岛总数
    //   const QDRes = await req("/lifting-service/qdregularcheck/list", "GET", {
    //     pageNum: 1,
    //     pageSize: 1,
    //     f032: this.searchArgs.s001,
    //     f010: this.searchArgs.s002,
    //     f004: this.searchArgs.s003,
    //   });
    //   // 计算总数
    //   if (TLRes.data && QDRes.data) {
    //     this.TLTotal = +TLRes.data.total;
    //     this.QDTotal = +QDRes.data.total;
    //     this.total = this.TLTotal + this.QDTotal;
    //   }
    //   // 如果当前获取的是铜陵的数据
    //   if (this.TLTotal - (this.currentPage - 1) * this.pageSize > 0) {
    //     // 获取铜陵的数据
    //     const res = await req("/lifting-service/info/list", "GET", {
    //       pageNum: this.currentPage,
    //       pageSize: this.pageSize,
    //       // 搜索条件
    //       // ...
    //       f013: this.searchArgs.s001,
    //       f014: this.searchArgs.s002,
    //       f032: this.searchArgs.s003,
    //     });
    //     if (res.data) {
    //       const { list } = res.data;
    //       // 生成定检数据字段和用于表格展示的字段
    //       for (const item of list) {
    //         item["a001"] = "1份";
    //         item["a002"] = "0条";
    //         item["a003"] = "0份";
    //         item["a004"] = "0条";
    //         item["a005"] = "0天";
    //         item["a006"] = "0天";
    //         this.setTLCheckData(item);
    //         this.setTLTableRowData(item);
    //       }
    //       // 如果是第一页，且不使用条件搜索，将两项重要数据添加置顶
    //       if (this.currentPage == 1 && showDeafultValue) {
    //         this.addMGData(list);
    //       }
    //       // 生成序号
    //       this.generateIds(list);
    //       // 生成选中属性
    //       this.generateSelected(list);
    //       this.tableData = list;
    //     } else {
    //       this.total = 0;
    //       this.tableData = [];
    //     }
    //   } else {
    //     // 获取青岛的数据
    //     // 计算青岛数据页面序号
    //     const targetPageIndex =
    //       this.currentPage - (parseInt(this.TLTotal / this.pageSize) + 1);
    //     const res = await req("/lifting-service/qdregularcheck/list", "GET", {
    //       pageNum: targetPageIndex,
    //       pageSize: this.pageSize,
    //       // 搜索条件
    //       // ...
    //       f032: this.searchArgs.s001,
    //       f010: this.searchArgs.s002,
    //       f004: this.searchArgs.s003,
    //     });
    //     if (res.data) {
    //       const { list } = res.data;
    //       // 生成定检数据字段和用于表格展示的字段
    //       for (const item of list) {
    //         item["a001"] = "1份";
    //         item["a002"] = "0条";
    //         item["a003"] = "0份";
    //         item["a004"] = "0条";
    //         item["a005"] = "0天";
    //         item["a006"] = "0天";
    //         this.setQDCheckData(item);
    //         this.setQDTableRowData(item);
    //       }
    //       // 如果是最后一页，舍去最后几项，直到总数和分页显示的总数相同
    //       if (this.currentPage == Math.ceil(this.total / this.pageSize)) {
    //         if (list.length > this.total % this.pageSize) {
    //           let count = list.length - (this.total % this.pageSize);
    //           while (count > 0) {
    //             list.pop();
    //             count--;
    //           }
    //         }
    //       }
    //       // 生成序号
    //       this.generateIds(list);
    //       this.tableData = list;
    //     } else {
    //       this.total = 0;
    //       this.tableData = [];
    //     }
    //   }
    // },
    reset() {
      this.searchArgs = {
        s001: "",
        s002: "",
        s003: "",
      };
      this.show();
    },
    // 根据页面生成数据的ID
    generateIds(list) {
      for (const index in list) {
        list[index].Id = +index + 1 + this.pageSize * (this.currentPage - 1);
      }
    },
    // 为每个数据生成一个默认的选中属性，默认为false
    generateSelected(list) {
      for (const index in list) {
        list[index].selected = false;
      }
    },
    // 页面跳转
    gotoDetail(Id) {
      // Id=+Id;
      // if(Id!=1){
      //   return
      // }
      // this.$router.replace({
      //   name: "regularCheckMGPage",
      // });
    },
    setTableRowData(row) {
      // 生成起重机用于表格展示的数据字段
      row.t001 = row.f013; // 设备类别
      row.t002 = row.f014; // 设备品种
      row.t003 = row.f045; // 产品编号
      row.t004 = row.f002; // 设备代码
      row.t005 = row.f037; // 企业编号
      row.t006 = row.f015; // 规格型号
      row.t007 = row.f032; // 使用单位
    },
    // 生成铜陵起重机用于表格展示的数据字段
    async setTLTableRowData(row) {
      row.t001 = row.f013; // 设备类别
      row.t002 = row.f014; // 设备品种
      row.t003 = row.f045; // 产品编号
      row.t004 = row.f002; // 设备代码
      row.t005 = row.f037; // 企业编号
      row.t006 = row.f015; // 规格型号
      row.t007 = row.f032; // 使用单位
    },

    // 生成青岛起重机用于表格展示的数据字段
    async setQDTableRowData(row) {
      row.t001 = row.f032; // 设备类别
      row.t002 = row.f010; // 设备品种
      row.t003 = row.f017; // 产品编号
      row.t004 = row.f014; // 设备代码
      row.t005 = row.f011; // 企业编号
      row.t006 = row.f016; // 规格型号
      row.t007 = row.f004; // 使用单位
    },
    // 获取并生成马钢起重机定检数据字段
    async setMgChecKData(row) {
      const data = (await req("/lifting-service/mgregularcheck/allList", "GET"))
        .data;
      console.log("获取到了马钢定检数据", data);
      const checkList = [];
      for (const item of data) {
        if (item.f014 == row.t003) {
          checkList.push({
            Equ: item.f015, // 起重机企业内部编号
            Sydw: item.f002, // 使用单位名称
            c001: item.f002, // 使用单位名称
            c002: item.f003, // 使用单位地址
            c003: item.f004, // 使用地点
            c004: item.f005, // 使用单位统一社会信用代码
            c005: item.f006, // 使用单位安全管理人员
            c006: item.f007, // 使用单位联系电话
            c007: item.f008, // 使用单位邮政编码
            c008: item.f009, // 制造单位名称
            c009: "", // 改造（重大修理）单位名称
            c010: item.f010, // 设备类别
            c011: item.f011, // 设备品种
            c012: item.f012, // 型号规格
            c013: item.f013, // 设备代码
            c014: item.f014, // 产品编号
            c015: item.f015, // 单位内编号
            c016: item.f016, // 投入使用日期
            c017: item.f017, // 设计使用年限
            c018: item.f018, // 跨度
            c019: item.f020, // 额定起重量
            c020: item.f019, // 工作级别
            c021: item.f023, // 起升速度
            c022: item.f025, // 小车（纵移）运行速度
            c023: item.f024, // 大车（横移）运行速度
            c024: item.f022, // 起升高度
            c025: item.f025, // 小车运行速度
            c026: item.f026, // 其他主要参数
            c027: item.f027, // 检验依据
            c028: item.f028, // 检验结论
            c029: item.f029, // 下次检验日期
            c030: item.f030, // 备注
            c031: item.f032, // 检验日期
            c032: item.f034, // 审核日期
            c033: item.f036, // 批准日期
            c034: item.f037, // 检验机构核准证号
          });
        }
      }
      row.checkList = checkList;
    },
    setCheckData(item) {
      // 生成起重机定检数据字段
      const checkList = [];
      checkList.push({
        Equ: item.f037, // 起重机企业内部编号
        Sydw: item.f032, // 使用单位名称

        c001: item.f032, // 使用单位名称
        c002: item.f033, // 使用单位地址
        c003: item.f038, // 使用地点
        c004: item.f031, // 使用单位统一社会信用代码
        c005: item.f072, // 使用单位安全管理人员
        c006: item.f035, // 使用单位联系电话
        c007: item.f005, // 使用单位邮政编码
        c008: item.f042, // 制造单位名称
        c009: item.f083, // 改造（重大修理）单位名称
        c010: item.f013, // 设备类别
        c011: item.f014, // 设备品种
        c012: item.f015, // 型号规格
        c013: item.f002, // 设备代码
        c014: item.f045, // 产品编号
        c015: item.f037, // 单位内编号
        c016: item.f039, // 投入使用日期
        c017: item.f044, // 设计使用年限
        c018: item.f106, // 跨度
        c019: item.f104, // 额定起重量
        c020: item.f099, // 工作级别
        c021: item.f102, // 起升速度
        c022: item.f092, // 小车（纵移）运行速度
        c023: item.f091, // 大车（横移）运行速度
        c024: item.f093, // 起升高度
        c025: item.f092, // 小车运行速度
        c026: "", // 其他主要参数
        c027: item.f008, // 检验依据
        c028: item.f048, // 检验结论
        c029: item.f053, // 下次检验日期
        c030: "", // 备注
        c031: item.f050, // 检验日期
        c032: "", // 审核日期
        c033: "", // 批准日期
        c034: "", // 检验机构核准证号
      });
      item.checkList = checkList;
      // console.log('设置定检字段：',item.checkList)
    },
    // 生成铜陵起重机定检数据字段
    setTLCheckData(item) {
      const checkList = [];
      checkList.push({
        Equ: item.f037, // 起重机企业内部编号
        Sydw: item.f032, // 使用单位名称

        c001: item.f032, // 使用单位名称
        c002: item.f033, // 使用单位地址
        c003: item.f038, // 使用地点
        c004: item.f031, // 使用单位统一社会信用代码
        c005: item.f072, // 使用单位安全管理人员
        c006: item.f035, // 使用单位联系电话
        c007: item.f005, // 使用单位邮政编码
        c008: item.f042, // 制造单位名称
        c009: item.f083, // 改造（重大修理）单位名称
        c010: item.f013, // 设备类别
        c011: item.f014, // 设备品种
        c012: item.f015, // 型号规格
        c013: item.f002, // 设备代码
        c014: item.f045, // 产品编号
        c015: item.f037, // 单位内编号
        c016: item.f039, // 投入使用日期
        c017: item.f044, // 设计使用年限
        c018: item.f106, // 跨度
        c019: item.f104, // 额定起重量
        c020: item.f099, // 工作级别
        c021: item.f102, // 起升速度
        c022: item.f092, // 小车（纵移）运行速度
        c023: item.f091, // 大车（横移）运行速度
        c024: item.f093, // 起升高度
        c025: item.f092, // 小车运行速度
        c026: "", // 其他主要参数
        c027: item.f008, // 检验依据
        c028: item.f048, // 检验结论
        c029: item.f053, // 下次检验日期
        c030: "", // 备注
        c031: item.f050, // 检验日期
        c032: "", // 审核日期
        c033: "", // 批准日期
        c034: "", // 检验机构核准证号
      });
      item.checkList = checkList;
    },
    // 生成青岛起重机定检数据字段
    setQDCheckData(item) {
      const checkList = [];
      checkList.push({
        Equ: item.f011, // 起重机企业内部编号
        Sydw: item.f004, // 使用单位名称

        c001: item.f004, // 使用单位名称
        c002: item.f005, // 使用单位地址
        c003: item.f007, // 使用地点
        c004: item.f006, // 使用单位统一社会信用代码
        c005: item.f008, // 使用单位安全管理人员
        c006: item.f009, // 使用单位联系电话
        c007: "", // 使用单位邮政编码
        c008: item.f012, // 制造单位名称
        c009: "", // 改造（重大修理）单位名称
        c010: item.f032, // 设备类别
        c011: item.f010, // 设备品种
        c012: item.f016, // 型号规格
        c013: item.f014, // 设备代码
        c014: item.f017, // 产品编号
        c015: item.f011, // 单位内编号
        c016: "", // 投入使用日期
        c017: "", // 设计使用年限
        c018: item.f020, // 跨度
        c019: item.f019, // 额定起重量
        c020: item.f018, // 工作级别
        c021: item.f022, // 起升速度
        c022: item.f024, // 小车（纵移）运行速度
        c023: item.f023, // 大车（横移）运行速度
        c024: item.f021, // 起升高度
        c025: item.f024, // 小车运行速度
        c026: "", // 其他主要参数
        c027: item.f025, // 检验依据
        c028: item.f027, // 检验结论
        c029: item.f029, // 下次检验日期
        c030: "", // 备注
        c031: item.f003, // 检验日期
        c032: "", // 审核日期
        c033: "", // 批准日期
        c034: "", // 检验机构核准证号
      });
      item.checkList = checkList;
    },
    yearChange(id, type) {
      this.year = id;
    },
    monthChange(id, type) {
      this.month = id;
    },
    dayChange(id, type) {
      this.day = id;
    },
    change(event) {},
    // 页面大小改变
    async pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      // 获取数据
      this.show();
    },
    // 页数改变
    async pageChange(page) {
      this.currentPage = page;
      // 获取数据
      await this.show();
    },
    // 选中状态改变
    async selectedChange(row) {
      if (row.selected == true) {
        // 遍历所有行，取消其他行的选中状态
        for (const item of this.tableData) {
          if (item.Id != row.Id) {
            item.selected = false;
          }
        }
        // 选中了当前行，进行一些操作
        // ... ...
        console.log("选中了当前行", row.Id);
        this.setSelectedEqu({ ...row });
        this.setPageState({ page: this.currentPage, Id: row.Id });
      } else {
        // 取消选中当前行的操作
        // ...
      }
    },
    // 根据store中的状态还原列表的选中状态
    async recoverSelectedItem(Id) {
      console.log("列表长度是：", this.tableData.length);
      for (const item of this.tableData) {
        console.log(item.Id);
        if (item.Id == Id) {
          item.selected = true;
        }
      }
    },
    ...mapMutations({
      setSelectedEqu: "SET_SELECTED_EQU",
      setPageState: "SET_SELECTED_PAGE_STATE",
    }),
  },
  async created() {
    // 检查store中的页面选中状态是否存在，存在则还原选中状态
    console.log(this.selectedPageState.page);
    if (
      (this.selectedPageState != null) &
      (this.selectedPageState.page != null)
    ) {
      console.log("进入");
      await this.pageChange(this.selectedPageState.page);
      await this.recoverSelectedItem(this.selectedPageState.Id);
    } else {
      this.show();
    }
  },
  data() {
    return {
      date: new Date(),
      year: "",
      month: "",
      day: "",
      mydate: "",
      calendar: {},
      searchArgs: {
        s001: "", // 设备类别
        s002: "", // 设备品种
        s003: "", // 使用单位名称
      },
      naviItems: [{ text: "起重机械" }, { text: "数据仓储" },{ text: "数据概览" }],
      tableData: [], // 当前页面表格数据
      total: 0, // 表格数据总项数
      TLTotal: 0, // 铜陵总数
      QDTotal: 0, // 青岛总数
      loading: false, // 表格是否在加载
      pageSize: 30, // 默认一页15项数据
      currentPage: 1,
      /*[{
          1: '1',
          2: 'MT-2001472',
          3: '浮顶型',
          4: '中化南通石化储运有限公司',
          5: '1份',
          6: ' ',
          7: ' ',
          8: ' ',
          9: ' ',
          10: ' '
        }, {
          1: '2',
          2: 'LYG-2001472',
          3: '浮顶型',
          4: '中化南通石化储运有限公司',
          5: '1份',
          6: ' ',
          7: ' ',
          8: ' ',
          9: ' ',
          10: ' '
        }]*/
    };
  },
  computed: {
    ...mapGetters(["seletedEqu", "selectedPageState"]),
  },
  filters: {
    userTypeFilter(type) {
      let typeText = type;
      userTypes.forEach((val) => {
        if (type === val.value) {
          typeText = val.name;
        }
      });
      return typeText;
    },
    menuFilter(ids) {
      let length = 0;
      if (ids) {
        length = ids.length;
      }
      return length;
    },
    dateTimeFilter(time) {
      return parseTime(time);
    },
  },
  mounted() {
    let _this = this; //声明一个变量指向vue实例this,保证作用域一致
    (this.timer = setInterval(function () {
      _this.date = new Date(); //修改数据date
    }, 1000)),
      console.log(this.$route.path); // 输出当前页面的路由，如：/home
  },
};
</script>

<style lang="less" scoped>
.headerbackgroud {
}
.allbody {
  width: 100%;
  height: 1050px;
}
.rowclass {
  width: 100%;
  height: 50%;
}

#text {
  -webkit-text-fill-color: white;
}
.select {
  color: white;
}
.hello {
  // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
  /deep/ input::-webkit-input-placeholder {
    color: #fff;
  }
  /deep/ input::-moz-input-placeholder {
    color: #fff;
  }
  /deep/ input::-ms-input-placeholder {
    color: #fff;
  }

  //修改的是el-input的样式
  //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
  //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner {
    background-color: #08164d;
    color: #fff;
    border: 0px;
    border-radius: 0px;
    text-align: center;
  }
}
.map1,
.map2,
.map3 {
  position: absolute;
  opacity: 0.5;
}
.map1 {
  margin-left: 580px;
  margin-top: 230px;
  z-index: 2;
  animation: myfirst2 15s infinite linear;
}
.map2 {
  margin-left: 625px;
  margin-top: 275px;
  z-index: 3;
  opacity: 0.2;
  animation: myfirst 10s infinite linear;
}
.map3 {
  margin-left: 650px;
  margin-top: 300px;
  z-index: 1;
}
@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
</style>
